<template>
    <div>
        <el-card class="login-form-layout">
            <el-form
                    :model="loginForm"
                    :rules="rules"
                    ref="loginFormRef"
                    class="demo-ruleForm"
            >
                <el-image
                        style="width: 100px; height: 100px"
                        :src="logo"
                        :fit="'fill'"></el-image>
                <el-form-item prop="username">
                    <el-input
                            v-model="loginForm.username"
                            prefix-icon="el-icon-mobile-phone"
                    ></el-input>
                </el-form-item>
                <el-form-item prop="password">
                    <el-input
                            type="password"
                            v-model="loginForm.password"
                            prefix-icon="el-icon-sold-out"
                    ></el-input
                    >
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="submitForm('loginFormRef')">登录</el-button>
                    <el-button @click="resetForm('loginFormRef')">重置</el-button>
                </el-form-item>
            </el-form>
        </el-card>
    </div>
</template>

<script>
  // @ is an alias to /src
  // import HelloWorld from "@/components/HelloWorld.vue";
  import axios from 'axios'

  export default {
    name: "Login",
    data() {
      return {
        logo: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
        loginForm: {
          username: "admin",
          password: "macro123"
        },
        rules: {
          username: [
            {required: true, message: "请输入用户名", trigger: "blur"},
            {min: 3, message: "长度至少在 3 个字符或以上", trigger: "blur"}
          ],
          password: [
            {required: true, message: "请输入密码", trigger: "change"},
            {min: 3, message: "长度至少在 3 个字符或以上", trigger: "blur"}
          ]
        }
      };
    },
    methods: {
      submitForm(formName) {
        //this.$refs[formName]获取表单对象
        this.$refs[formName].validate(valid => {
          if (valid) {
            console.log("submit!");
            // console.log(this);
            let _self = this;
            axios.post("http://localhost:9527/admin/login", this.loginForm)
              .then(function ({data:result}) {
                console.log(result);
                // let data = response.data;
                let code = result.code;
                console.log(typeof code);
                if (code === 200) {
                  let token = result.data.tokenHead + result.data.token;
                  console.log(token);
                  console.log(this);
                  _self.$router.push({path: '/home'});
                } else {
                  let msg = result.message;
                  console.log(msg);
                }

              });
            console.log("登录执行完毕");
          } else {
            console.log("error submit!!");
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      }
    }
  };
</script>

<!--<style scoped>
  表示该样式只在本vue文件中有效
-->
<style scoped>
    .login-form-layout {
        position: absolute;
        left: 0;
        right: 0;
        width: 360px;
        margin: 140px auto;
        border-top: 10px solid #409eff;
    }

    .login-title {
        text-align: center;
    }

    .login-center-layout {
        background: #409eff;
        width: auto;
        height: auto;
        max-width: 100%;
        max-height: 100%;
        margin-top: 200px;
    }
</style>
